<!doctype html>
<head>
<meta charset="utf-8">
<title>IE engine version detection - by Jimm Chen</title>
<style>
:root {
    box-sizing: border-box;
}

*,
::before,
::after {
    box-sizing: inherit;
}
body { margin: 0px; }

.infobanner { 
	margin: 20px;
	border: 1px solid #333;
	padding: 5px;
	text-align: center;
}

.smalltitle {
	color: #999;
	font-size: 0.8em;
}
.bigresult {
	font-weight: bold;
	font-size: 1.5em;
}

.para { 
	margin: 1em 0em;
	color: #888;
}

.red-bg    { background-color: #fcc; }
.green-bg  { background-color: #cfc; }
.blue-bg   { background-color: #cef; }
.block  { width: 50px; height: 50px; }
.table-cell { display: table-cell; }

.shrink { transform: scale(0.6); } 

.die6 { 
	display: inline;
	font-size: 0.8em;
}
.Lmargin { margin-left: 10px; }
.Rmargin { margin-right: 10px; }

#border1 { background-color: #eee; }

.border-xcolor {
  /* Thanks to 
  	https://zeropointdevelopment.com/css-hacks-for-ie-targeting-only-ie8-ie7-and-ie6/ 
  */
  border: 2px solid #aaa;  /* IE8 to IE11 - grey border */
  border: 2px solid #f009; /* Chrome 88 and Firefox 78 - red border */
  *border: 2px solid #0f0; /* IE7 - green border (confirmed, Vista IE7) */
  _border: 2px solid #00f; /* IE6 - blue border (confirmed, WinXP IE6, and IE5-9 Quirks mode) */
}

.dark11 {
	display: inline-block;
	border: 1px solid grey;
	color: grey;
	margin: 20px;
	padding: 10px;
}

*::-ms-backdrop, .ie11only {
	/* 
	  CSS hack to distinguish IE 10 & 11.
	  Thanks to https://stackoverflow.com/a/22085269/151453 
	  Be aware, IE5/6/7 will get influenced as well, but not IE 8 & 9.
	*/
	color: red;
}

#gradient1 { background: linear-gradient(15deg, orange, yellow); }
:target { background-color: yellow; }

</style>
</head>

<body>

	<div class="infobanner">
		<div id="smalltitle" class="smalltitle">IE Engine Detection Result (≈Document Mode)</div>
		<div id="bigresult" class="bigresult">...</div>
	</div>

	<div class="para">
		<div>[Detect IE Quirks mode(a.k.a. IE5)] If you see 3 same-size <b>square</b> blocks, the engine is using Quirks mode.</div>
		<div id="inline1">
			<div id="quirks-red" class="red-bg block die6 Rmargin">red</div><div id="quirks-green" class="green-bg block die6 Lmargin Rmargin">green</div><div id="quirks-blue" class="blue-bg block die6 Lmargin">blue</div>
		</div>
	</div>

	<div class="para">
		<div>[Distinguish IE6/IE7] IE6 in blue border, IE7 in green border. </div>
		<div id="border1" class="border-xcolor block">
		</div>
	</div>

	<div class="para">
		<div>[CSS-Table, IE8+] If the color blocks are side-by-side horizontally, the engine is IE8 or newer.</div>
		<div id="csstable1" style="display: table;">
			<div id="csstable-cell-red" class="red-bg block table-cell"></div>
			<div id="csstable-cell-green" class="green-bg block table-cell"></div>
			<div id="csstable-cell-blue" class="blue-bg block table-cell"></div>
		</div>
	</div>

<!-- 
	<div class="para">
		<div>[CSS Transform, IE9+] If the color blocks are shrunk, the engine is IE9 or newer.</div>
		<div id="csstransform1" style="display: table;">
			<div id="csstransform-red" class="red-bg block table-cell shrink"></div>
			<div id="csstransform-green" class="green-bg block table-cell shrink"></div>
			<div id="csstransform-blue" class="blue-bg block table-cell shrink"></div>
		</div>
	</div>
-->
 
	<div class="para">
	<div>[SVG, IE9+] If you can see SVG letters in a green circle, the engine is IE9 or newer.</div>
	<div id="svg1div">
		<svg id="svg1" version="1.1"
		     baseProfile="full"
		     width="50" height="50"
		     xmlns="http://www.w3.org/2000/svg">

			<circle cx="25" cy="25" r="25" fill="green" />
			<text x="25" y="30" font-size="16" text-anchor="middle" fill="yellow">SVG</text>
		</svg>
	</div>
	</div>

	<div class="para">
		<div>[Flexbox, IE10+] If the color blocks are displayed horizontally, the engine is IE10 or newer.</div>
		<div id="cssflexbox1" style="display: flex;">
			<div id="flexbox-red" class="red-bg block shrink"></div>
			<div id="flexbox-green" class="green-bg block shrink"></div>
			<div id="flexbox-blue" class="blue-bg block shrink"></div>
		</div>
	</div>

<!-- IE10 & IE11 supports CSS linear-gradient .
	<div class="para">
		<div>[IE11].</div>
		<div id="gradient1" class="block">
		</div>
	</div>
-->

	<div class="para">
		<div>[<a href="#detect-ie11">IE11 specific CSS</a>]</div>
		<div id="detect-ie11" class="ie11only dark11">
			If using IE11, this text will be red, otherwise, grey.
		</div>
	</div>

	<div class="para">
		<div>[CSS Grid, Beyond IE11] If the color blocks are scattered horizontally, the engine is beyond IE11.</div>
		<div id="cssgrid1" style="display: grid; grid-template-columns: 1fr 1fr 1fr;">
			<div id="cssgrid-red" class="red-bg block"></div>
			<div id="cssgrid-green" class="green-bg block"></div>
			<div id="cssgrid-blue" class="blue-bg block"></div>
		</div>
	</div>

</body>

<script language="javascript">
	function ShowResult(text, undo_ie11_hack) {
	
		// .innerText is available since IE 3.0
		// .textContent is available since IE 9.0
		// so use .innerText .
		
		var eresult = document.getElementById('bigresult');
		eresult.innerText = text;
		
		if(undo_ie11_hack) {
			document.getElementById('detect-ie11').style.color = "grey";
		}
	}

	// Main function below:
	(function(){

		// Detect Quirks mode first.

		var equirk = document.getElementById('quirks-green');
		if (equirk.offsetHeight==50) {
			ShowResult("IE Quirks mode (a.k.a. IE5)", true);
			return;
		}
		
		// Detect IE6 & IE7
		
		var eD67 = document.getElementById('border1');
		// IE8 and below does not support getComputedStyle(), so use .currentStyle
		if (eD67.currentStyle) {
			// IE5 ~ IE11
			var c = eD67.currentStyle.borderTopColor;
			if (c=="#00f") {
				ShowResult("IE6", true);
				return;
			}
			else if (c=="#0f0") {
				ShowResult("IE7", true);
				return;
			}
		}
		
		// Confirm IE8 with CSS-Table
		
		var eD8 = document.getElementById('csstable-cell-green');
		if (eD8.offsetLeft!=50) {
			// Unexpect: CSS-Table does NOT takes effect!
			alert("I think it is IE8, but CSS-Table test fails.");
			return;
		}
		
		var eD9 = document.getElementById('svg1div');
		if (eD9.offsetHeight<50) {
			ShowResult("IE8", false);
			return;		
		} // For IE9+, eD9.offsetHeight>=50 
		
		// IE9 or above
		
		var eD10 = document.getElementById('flexbox-green');
		if (eD10.offsetLeft!=50) {
			ShowResult("IE9", false);
			return;
		} // For IE10+, eD10.offsetLeft==50
		
		// IE10 or above
		
		var eModern = document.getElementById('cssgrid-green');
		if (eModern.offsetLeft>=50) {
			ShowResult("Edge/Chrome/Firefox (a modern browser beyond IE11)");
			return;
		}
		else {
			// IE aligns those grids vertically, which means unsupported.
			// Now check IE10 or IE11.

			var eD11 = document.getElementById('detect-ie11');
			var st11 = window.getComputedStyle(eD11);
			// alert(st11.color);
			if (st11.color=="rgb(255, 0, 0)") { // red
				ShowResult("IE11", false);
				return;
			}
			else {
				ShowResult("IE10", false);
			}
		}
		
	})();
	
</script>
